<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            /* border-spacing: 0; */
            margin: auto;
            text-align: center;
        }
    </style>
</head>

<body>
    <table border="1" cellspacing="0" cellpadding="10px">
        <caption>菜单</caption>
        <tr>
            <td><input type="checkbox" name="" id="">全选</td>
            <td>菜名</td>
            <td>价格</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="" id=""></td>
            <td>土豆丝</td>
            <td>15￥</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="" id=""></td>
            <td>红烧肉</td>
            <td>30￥</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="" id=""></td>
            <td>鱼香肉丝</td>
            <td>28￥</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="" id=""></td>
            <td>糖醋里脊</td>
            <td>30￥</td>
        </tr>
    </table>
</body>
<script>
    let checkObj = document.getElementsByTagName('input');

    console.log(checkObj[0].checked);
    checkObj[0].onclick = function () {
        if (checkObj[0].checked) {
            for (let i = 1; i < checkObj.length; i++) {
                checkObj[i].checked = 'checked';
            }
        } else {
            for (let i = 1; i < checkObj.length; i++) {
                checkObj[i].checked = '';
            }
        }
    }

    for (let i = 1; i < checkObj.length; i++) {
        checkObj[i].onclick = function () {
            let bool = true;
            for (let i = 1; i < checkObj.length; i++) {
                bool = bool && checkObj[i].checked;
            }
            // console.log(bool);
            if (!bool) {
                checkObj[0].checked = '';
            } else {
                checkObj[0].checked = 'checked';
            }
        }

    }
</script>

</html>